import { defineComponent } from 'vue'
import {
  ElForm,
  ElFormItem,
  ElInput,
  ElSelect,
  ElOption,
  ElSwitch,
  ElCheckboxGroup,
  ElCheckbox,
  ElRadioGroup,
  ElRadio,
  ElButton,
  ElDatePicker,
  ElTimePicker
} from 'element-plus'
import type { FormFields } from '@/forms/forms'
// import type { FormFieldType, FormFields } from '@/forms/forms'

// const Render: FormFieldType<void | VNode> = {
//   input: (field) => {},
//   select: (field) => {},
//   'async-select': (field) => {},
//   date_time: (field) => {},
//   switch: (field) => {},
//   'checkbox-group': (field) => {},
//   'async-checkbox-group': (field) => {},
//   'radio-group': (field) => {},
//   'async-radio-group': (field) => {},
//   textarea: (field) => {}
// }

interface Props {
  model: Record<string, any>
  fields: FormFields
  submitText: string
  resetText: string
}

export default defineComponent(
  (props: Props) => {
    const form = reactive(props.model)

    return () => {
      return (
        <ElForm>
          {props.fields.map((field) => {
            if (field.type === 'date_time') {
              const [date, time] = field.date_time
              return (
                <ElFormItem class="flex" label={field.label}>
                  <ElFormItem prop={date.model}>
                    <ElDatePicker
                      type="date"
                      v-model={form[date.model]}
                      {...date.meta}
                    ></ElDatePicker>
                  </ElFormItem>
                  <span class="text-gray-500">-</span>
                  <ElFormItem prop={time.model}>
                    <ElTimePicker v-model={form[date.model]} {...date.meta}></ElTimePicker>
                  </ElFormItem>
                </ElFormItem>
              )
            }

            let result
            if (field.type === 'input') {
              result = <ElInput v-model={form[field.model]} {...field.meta} />
            } else if (field.type === 'textarea') {
              result = <ElInput type="textarea" v-model={form[field.model]} {...field.meta} />
            } else if (field.type === 'select') {
              result = (
                <ElSelect v-model={form[field.model]} {...field.meta}>
                  {field.opitons.map((option) => (
                    <ElOption key={option.value} label={option.label} value={option.value} />
                  ))}
                </ElSelect>
              )
            } else if (field.type === 'switch') {
              result = <ElSwitch v-model={form[field.model]} {...field.meta} />
            } else if (field.type === 'checkbox-group') {
              result = (
                <ElCheckboxGroup v-model={form[field.model]} {...field.meta}>
                  {field.checkbox.map((checkbox) => (
                    <ElCheckbox key={checkbox.value} name={field.model} value={checkbox.value}>
                      {checkbox.label}
                    </ElCheckbox>
                  ))}
                </ElCheckboxGroup>
              )
            } else if (field.type === 'radio-group') {
              result = (
                <ElRadioGroup v-model={form[field.model]} {...field.meta}>
                  {field.radio.map((radio) => (
                    <ElRadio key={radio.value} name={field.model} value={radio.value}>
                      {radio.label}
                    </ElRadio>
                  ))}
                </ElRadioGroup>
              )
            }

            return (
              <ElFormItem label={field.label} prop={field.model}>
                {result}
              </ElFormItem>
            )
          })}
          <ElFormItem>
            <ElButton type="primary" onClick={() => 1}>
              {props.submitText}
            </ElButton>
            <ElButton>{props.resetText}</ElButton>
          </ElFormItem>
        </ElForm>
      )
    }
  },
  {
    props: ['model', 'fields', 'submitText', 'resetText']
  }
)
